<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- ----JavaSpcrit：核心语法+DOM(针对页面操作)+BOM(针对浏览器) 
		学习主体：针对页面操作比较多---DOM操作
		JQuery操作DOM：理解：JQ框架改变页面内容效果
		基础函数---事件源之后出现，事件源语法糖中
		html()  作用：增加一个元素，覆盖原有html
		val()   作用：针对input。实现修改
		text()   作用：生成文本内容
		-->
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮 然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate atque modi totam similique, ducimus neque vitae sapiente repellendus mollitia rerum perferendis assumenda quas architecto, ex a illum culpa ab ipsam.</p>
	    <div style="width: 200px; height:200px; background: #000;"></div>
		<h3>lorem</h3>
		<input type="button"  value="按钮2"/>
		<input type="button"  value="文本框内容可以直接修改"/>
	<script>
		$("button").click(function(){
			/*	JQ操作DOM--html()函数使用*/
			$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
		});
		/*练习1 div 200*200 背景颜色：黑色，鼠标滑过后
		下面内容修改：<h3>提示，修改为黄色
		*/
	   $("div").mouseenter(function(){
		   $("h3").html("<h3>黄颜色</h3>")
	   });
	   /*练习2  按钮 文本框 点击按钮 文本框增加一行文本*/
	   $("input[type='button']").click(function(){
		  // alert("jq选择器是否选中") 
		  $("input[type='text']").val("文本框内容修改~")
	   });
	   /*利用jq操作DOM(页面效果) 元素内容操作(3个函数)
	                            属性操作(4个函数)
								样式类名操作(4个函数)
								元素样式操作(5个元素)
								插入和删除操作(7个函数)
								元素遍历操作(7个函数)
	   */
	</script>
	</body>
</html>